---
title: Redirects
---

Imagine you want users to enter the URL `/@drake`, and for it to redirect to the page at `/artists/[slug].tsx`.

Next.js lets you handle this easily with redirects and rewrites inside of `next.config.js`

```js twoslash
// next.config.js

module.exports = {
  async rewrites() {
    return [
      {
        source: '/@:slug',
        destination: '/artists/:slug',
      },
    ]
  },
}
```

The issue is, this won't work out of the box with React Navigation.

In order to achieve the same, we'll need to edit the [React Navigation linking config](https://reactnavigation.org/docs/configuring-links).

```tsx twoslash
import * as Linking from 'expo-linking'
import { getStateFromPath, LinkingOptions } from '@react-navigation/native'

const withRewrites = (unparsedPath: string): string => {
  if (unparsedPath.startsWith('/@')) {
    const slug = unparsedPath.replace('/@', '').split('?')[0].split('/')[0]
    const rest = unparsedPath.replace(`/@${slug}`, '')

    return `/artists/${slug}${rest}`
  }

  // you can put other redirects here

  return unparsedPath
}

const linking: LinkingOptions<ReactNavigation.RootParamList> = {
  // ...your linking config
  prefixes: [Linking.createURL('/'), 'https://fernandorojo.co'],
  getStateFromPath(path, config) {
    const finalPath = withRewrites(path)

    return getStateFromPath(finalPath, config)
  },
}
```
